<template>
    <div>
        <!-- 模板 -->
        <h1>头部样式</h1>
        <el-row class="head">
            <el-col :span="24">
                <h1 class="contract_title">板块名称</h1>
                <span>/ 板块介绍</span>
            </el-col>
        </el-row>

        <h1>分页模板</h1>
        <div class="block">
            <span class="demonstration">大于 7 页时的效果</span>
            <el-pagination layout="prev, pager, next" :total="1000"></el-pagination>
        </div>
        <h1>表格1（主流）</h1>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
        <h1>表格 带多选</h1>
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="日期" width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
            <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
        </el-table>
        <div style="margin-top: 20px">
            <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
            <el-button @click="toggleSelection()">取消选择</el-button>
        </div>
        <h1>表格3 带操作栏</h1>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <h1>下拉菜单</h1>
        <el-dropdown :hide-on-click="false">
            <span class="el-dropdown-link">
                下拉菜单
                <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>西红柿炒鸡蛋</el-dropdown-item>
                <el-dropdown-item>鱼香肉丝</el-dropdown-item>
                <el-dropdown-item>佛跳墙</el-dropdown-item>
                <el-dropdown-item disabled>水煮肉片</el-dropdown-item>
                <el-dropdown-item divided>宫保鸡丁</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <h1>tabs标签页</h1>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
            <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>
        <h1>消息提示</h1>
        <el-badge :value="12" class="item">
            <el-button size="small">评论</el-button>
        </el-badge>
        <br />
        <h1>标签</h1>
        <el-tag
            :key="tag"
            v-for="tag in dynamicTags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
        >{{tag}}</el-tag>
        <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
        ></el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
        <br />
        <h1>上传1</h1>
        <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
        >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <h1>用户头像上传自己搞</h1>
        <br />
        <h1>日期选择器</h1>
        <div class="block">
            <span class="demonstration">默认</span>
            <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
        </div>
        <br />

        <h1>select选择器</h1>
        <el-select v-model="value" clearable placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
        </el-select>
        <br />
        <h1>按钮1</h1>
        <el-button plain>朴素按钮</el-button>
        <h1>按钮2</h1>
        <el-button type="text">文字按钮</el-button>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 表格数据
            tableData: [
                {
                    date: "2016-05-02",
                    name: "罗小黑",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
                    date: "2016-05-04",
                    name: "罗小黑",
                    address: "上海市普陀区金沙江路 1517 弄"
                },
                {
                    date: "2016-05-01",
                    name: "罗小黑",
                    address: "上海市普陀区金沙江路 1519 弄"
                },
                {
                    date: "2016-05-03",
                    name: "罗小黑",
                    address: "上海市普陀区金沙江路 1516 弄"
                }
            ],
            // tabs标签页切换值
            activeName: "first",
            // 标签
            dynamicTags: ["标签一", "标签二", "标签三"],
            inputVisible: false,
            inputValue: "",
            // 日期选择器数据
            value1: "",
            // select选择器
            options: [
                {
                    value: "选项1",
                    label: "芝士莓莓"
                },
                {
                    value: "选项2",
                    label: "水果双皮奶"
                },
                {
                    value: "选项3",
                    label: "百香双重奏"
                },
                {
                    value: "选项4",
                    label: "芝士乌龙"
                },
                {
                    value: "选项5",
                    label: "书亦烧仙草"
                }
            ],
            value: ""
        };
    },
    methods: {
        // 标签三个事件
        handleClose(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },

        showInput() {
            this.inputVisible = true;
            this.$nextTick(() => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },

        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.dynamicTags.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = "";
        }
    }
};
</script>

<style>
/* 头部板块 */
* {
    margin: 0;
    padding: 0;
}
.contract_main {
    background: #e4e7ee;
}
.head {
    height: 70px;
    background: #f8f6f8;
    line-height: 70px;
}
.contract_title {
    display: inline-block;
    font-weight: unset;
    margin-left: 20px;
}
/* 下拉菜单 */
.el-dropdown-link {
    cursor: pointer;
}
.el-icon-arrow-down {
    font-size: 12px;
}
/* 标签 */
.el-tag + .el-tag {
    margin-left: 10px;
}
.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}
.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}
</style>